<template>
	<view>
		<!-- <page-head :title="'我的'" :headtype="1"></page-head> -->
		<view class="topblock">
			<image class="topbg" :src="apifun.serveimg+'hometbg.png'" mode="widthFix"></image>
			<view class="topmain">
				<view class="headmsg flex marginAuto">
					<view class="headmsgavatar">
						<image v-if="!usermsg.avatar" src="@/static/logo.png" mode=""></image>
						<image v-if="usermsg.avatar" :src="apifun.URLimg+usermsg.avatar" mode=""></image>
						<view class="leader mainBg baiColor" v-if="usermsg.is_team_leader == 1">团队长</view>
					</view>
					<view class="headmsgmain">
						<view class="headmsgmt flex">
							<view class="headmsgmt-name">{{ usermsg.username }} <text style="font-size:28rpx;">{{ usermsg.mobile }}</text></view>
						</view>
						<view class="headmsgmphone">{{ usermsg.school_name }} | {{ usermsg.edu_type }}</view>
					</view>
				</view>
				<view class="trainee marginAuto flex">
					<view class="traineeeach" @click="navigate('/pages/my/invitelist')">
						<view class="traine-num">{{ usermsg.invite_user || 0 }}</view>
						<view class="traine-tile">已邀请</view>
					</view>
					<view class="traineeeach">
						<view class="traine-num">{{ usermsg.school_fee || 0 }}</view>
						<view class="traine-tile">驾校学费</view>
					</view>
					<view class="traineeeach" @click="navigate('/pages/my/mypurse')">
						<view class="traine-num">{{ usermsg.money || 0 }}</view>
						<view class="traine-tile">我的钱包</view>
					</view>
				</view>
				<view class="trainee marginAuto flex">
					<view class="traineeeach">
						<view class="traine-num">{{ usermsg.no_pay_user || 0 }}</view>
						<view class="traine-tile">未结款学员</view>
					</view>
					<view class="traineeeach" >
						<view class="traine-num">{{ usermsg.pay_user || 0 }}</view>
						<view class="traine-tile">已结款学员</view>
					</view>
					<view class="traineeeach" @click="navigate('/pages/my/mypurse')">
						<view class="traine-num">{{ usermsg.platform_fee || 0 }}</view>
						<view class="traine-tile">平台佣金</view>
					</view>
				</view>
				<view class="order marginAuto">
					<view class="ordertop flex" @click="navigate('/pages/my/servicescore')">
						<view class="ordertopl flex">
							<view class="ordertopltitle">我的服务分</view>
						</view>
						<view class="ordertopr flex">
							<text>{{ usermsg.service_score }}</text>
							<uv-icon style="margin-top:-8rpx;" name="arrow-right" color="#333333" size="18"></uv-icon>
						</view>
					</view>
					<!-- <view class="ordertop flex" @click="navigate('/pages/my/comment')">
						<view class="ordertopl flex">
							<view class="ordertopltitle">学员点评上传(获取服务分)</view>
						</view>
						<view class="ordertopr flex">
							<uv-icon style="margin-top:-8rpx;" name="arrow-right" color="#333333" size="18"></uv-icon>
						</view>
					</view> -->
					<view class="ordertop flex" @click="navigate('/pages/my/syagreement')">
						<view class="ordertopl flex">
							<view class="ordertopltitle">使用协议</view>
						</view>
						<view class="ordertopr flex">
							<uv-icon style="margin-top:-8rpx;" name="arrow-right" color="#333333" size="18"></uv-icon>
						</view>
					</view>
					<view class="ordertop flex" @click="$refs.connpop.open()">
						<view class="ordertopl flex">
							<view class="ordertopltitle">联系我们</view>
						</view>
						<view class="ordertopr flex">
							<text>{{ usermsg.service_tel }}</text>
							<uv-icon style="margin-top:-8rpx;" name="arrow-right" color="#333333" size="18"></uv-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:100rpx;">
			<uv-button text="退出登录" @click="quitfun()" :customStyle="{
				'background':'#EDEDED',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'20rpx'
			}"></uv-button>
		</view>
		<!-- 弹窗 -->
		<uv-popup ref="connpop" bgColor="none" round="20">
			<view class="closetest">
				<image class="closetestbg" :src="apifun.serveimg+'closetestbg.png'" mode=""></image>
				<view class="closetesttitle" style="font-weight: 600;">{{ usermsg.service_tel }}</view>
				<view class="closetestbtn flex">
					<view class="closetestbtne mainBg baiColor marginAuto" style="width:368rpx;" @click="conncopyfun(usermsg.service_tel)">点击复制手机号</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				usermsg:{}
			};
		},
		onLoad() {
			this.usermsgfun()
		},
		methods: {
			usermsgfun(){
				let sendData = {};
				this.apifun.unirequest('/coach/user/getUserInfo','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('usermsg', datas);
						this.usermsg = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			conncopyfun(txt){
				uni.setClipboardData({
					data:txt
				})
				setTimeout(()=>{
					this.$refs.connpop.close()
				},1500)
			},
			navigate(urls,params){
				this.apifun.navigate(urls,params)
			},
			quitfun(){
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success:(res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							setTimeout(() => {
								uni.reLaunch({
									url:'/pages/start/login'
								})
							}, 300)
						} else if (res.cancel) {}
					}
				});
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.orderdata = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	@import '../../public/alert.scss';
	.topblock{
		position:sticky;
		top:0px;
		z-index: 10;
		background: #fff;
		width: 100%;
		.topbg{
			position: absolute;
			top: 0;
			z-index: 10;
			width:100%;
			height: 640rpx;
		}
		.topmain{
			position:relative;
			top: 0;
			z-index: 50;
			width: 100%;
			.headmsg{
				width: 690rpx;
				padding: 30rpx 0;
				.headmsgavatar{
					position: relative;
					width: 140rpx;
					height: 140rpx;
					image{
						width: 140rpx;
						height: 140rpx;
					}
					.leader{
						position: absolute;
						bottom: -15rpx;
						width: 140rpx;
						height:36rpx;
						line-height: 36rpx;
						border-radius: 100rpx;
						text-align: center;
						font-size:24rpx;
					}
				}
				.headmsgmain{
					width: 75%;
					margin-left: 20rpx;
					.headmsgmt{
						margin-top:30rpx;
						.headmsgmt-name{
							font-size: 34rpx;
							color: #333333;
							font-weight: 600;
						}
						.headmsgmtx{
							height: 44rpx;
							border: 1px solid #0E71EB;
							margin-left: 20rpx;
							border-radius: 100rpx;
							background: #fff;
							.headmsgmtxl{
								padding:0 10rpx;
								border-radius: 100rpx;
								image{
									margin-top: 5rpx;
									width: 34rpx;
									height: 34rpx;
								}
							}
							.headmsgmtxr{
								padding: 0 20rpx;
								font-size:24rpx;
								line-height: 44rpx;
								color: #0E71EB;
							}
						}
					}
					.headmsgmphone{
						font-size: 28rpx;
						color: #333333;
						line-height:46rpx;
						padding: 10rpx 0 0;
					}
					.headmsgmtd{
						.headmsgmtdicon{
							width: 32rpx;
							height: 32rpx;
						}
						.headmsgmtdname{
							margin-left: 20rpx;
							color: #0E71EB;
							font-size:28rpx;
						}
					}
				}
			}
			.trainee{
				position: relative;
				z-index: 50;
				width: 690rpx;
				padding-top:20rpx;
				justify-content:space-between;
				.traineeeach{
					width: 40%;
					.traine-num{
						text-align: center;
						color:#333333;
						font-size: 40rpx;
						line-height: 50rpx;
					}
					.traine-tile{
						padding-top:10rpx;
						text-align: center;
						color:#666666;
						font-size:28rpx;
						line-height: 50rpx;
					}
				}
			}
			.order{
				position: relative;
				z-index: 50;
				width: 640rpx;
				padding: 20rpx 25rpx;
				background: #ffffff;
				border-radius: 20rpx;
				margin-top: 40rpx;
				.ordertop{
					padding: 10rpx 0;
					justify-content: space-between;
					.ordertopl{
						margin-top: 10rpx;
						.ordertoplicon{
							width: 42rpx;
							height: 42rpx;
						}
						.ordertopltitle{
							font-size: 30rpx;
							color:#333333;
							margin-left: 10rpx;
							line-height:60rpx;
						}
					}
					.ordertopr{
						color: #666666;
						font-size:30rpx;
						line-height: 60rpx;
					}
				}
			}
		}
	}
	
</style>